<!-- 图片裁剪组件 -->
<template>
  <div class="imgCutter">
    <!-- 图片裁剪组件 -->
    <div v-if="!isCard">
      <vue-img-cutter v-if="multiple" :cutWidth="350" :cutHeight="220" v-on:cutDown="cutDown">
        <template #open>
          <el-button type="primary">{{ btnTitle }}</el-button>
        </template>
      </vue-img-cutter>
      <vue-img-cutter v-if="!multiple && dataList.length === 0" :cutWidth="350" :cutHeight="220" v-on:cutDown="cutDown">
        <template #open>
          <el-button type="primary">{{ btnTitle }}</el-button>
        </template>
      </vue-img-cutter>
    </div>
    <!-- 展示图片区域 -->
    <div class="imgs">
      <div v-for="(item, index) in dataList" :key="index" class="img_item" :style="'width:' + width + 'px;height:' + height + 'px;'">
        <el-image :src="item.fullUrl" :preview-src-list="getImgList(dataList)" :initial-index="index" preview-teleported fit="fill"></el-image>
        <svg @click="doDelete(index)" t="1608718992636" class="icon upload_pic_delete" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29470" width="20" height="20"><path d="M0 0h804.571429a219.428571 219.428571 0 0 1 219.428571 219.428571v804.571429H219.428571a219.428571 219.428571 0 0 1-219.428571-219.428571V0z" fill="#FF0000" opacity="1" p-id="29471"></path><path d="M580.754286 265.508571V219.428571H476.891429v46.08H292.571429v46.08h472.502857v-46.08z m83.382857 399.36a19.017143 19.017143 0 0 1-17.554286 19.748572H407.405714a18.285714 18.285714 0 0 1-21.211428-16.091429V365.714286h-47.542857v299.154285a66.56 66.56 0 0 0 66.56 66.56h237.714285a66.56 66.56 0 0 0 68.022857-64.365714V365.714286h-46.811428v299.154285z" fill="#FFFFFF" p-id="29472"></path><path d="M448.365714 365.714286h42.422857v228.937143h-42.422857z m110.445715 0h42.422857v228.937143h-42.422857z" fill="#FFFFFF" p-id="29473"></path></svg>
        <svg t="1608717984834" class="icon upload_pic_success" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10299" width="40" height="40"><path d="M321.8 928.6H928V322.3z" fill="#13CE66" p-id="10300" data-spm-anchor-id="a313x.7781069.0.i21" class=""></path><path d="M685.5 844.2l-80.9-80.9c-7.4-7.4-7.4-19.5 0-27 7.4-7.4 19.5-7.4 27 0l80.9 80.9c7.4 7.4 7.4 19.5 0 27-7.5 7.4-19.7 7.4-27 0z" fill="#ffffff" p-id="10301" data-spm-anchor-id="a313x.7781069.0.i23" class="selected"></path><path d="M874.2 682.5L712.4 844.2c-7.4 7.4-19.5 7.4-27 0-7.4-7.4-7.4-19.5 0-27l161.7-161.7c7.4-7.4 19.5-7.4 27 0 7.5 7.5 7.5 19.5 0.1 27z" fill="#ffffff" p-id="10302" data-spm-anchor-id="a313x.7781069.0.i22" class="selected"></path></svg>
      </div>
      <div v-if="isCard" class="card">
        <vue-img-cutter v-if="multiple" :cutWidth="350" :cutHeight="220" v-on:cutDown="cutDown">
          <template #open>
            <div class="upload_btn" :style="'width:' + width + 'px;height:' + height + 'px;'">
              <el-icon :size="addIcon" color="#DCDFE6"><Plus/></el-icon>
            </div>
          </template>
        </vue-img-cutter>
        <vue-img-cutter v-if="!multiple && dataList.length === 0" :cutWidth="350" :cutHeight="220" v-on:cutDown="cutDown">
          <template #open>
            <div class="upload_btn" :style="'width:' + width + 'px;height:' + height + 'px;'">
              <el-icon :size="addIcon" color="#DCDFE6"><Plus/></el-icon>
            </div>
          </template>
        </vue-img-cutter>
      </div>
    </div>
  </div>
</template>

<script setup>
  import VueImgCutter from 'vue-img-cutter'
  import { uploadFileApi, getFileUrlApi } from '@/api/api'
  import { reactive, toRefs, watch, getCurrentInstance } from 'vue'

  const currentThis = getCurrentInstance().appContext.config.globalProperties
  // 定义父组件传入的值
  const props = defineProps({
    modelValue: String,
    btnTitle: {
      type: String,
      default: '选择图片',
      required: false
    },
    multiple: { // 是否允许上传多个图片
      type: Boolean,
      default: true,
      required: false
    },
    isCard: { //卡片风格
      type: Boolean,
      default: false,
      required: false
    },
    addIcon: {
      type: String,
      default: '30',
      required: false
    },
    width: {
      type: String,
      default: '120',
      required: false
    },
    height: {
      type: String,
      default: '120',
      required: false
    }
  })
  // 定义传值给父组件数据方法
  const emits = defineEmits(['update:modelValue'])

  // 将resetImgCutter方法暴露，方便父组件可以通过ref调用
  defineExpose({resetImgCutter})

  const currentData = reactive({
    dataList: []
  })
  let {dataList} = toRefs(currentData)

  watch(() => props.modelValue, (newVal) => {
    init()
  }, {
    immediate: true // 立即监听
  })

  // 初始化，将父组件传入的初始值设置到展示图片区域
  function init() {
    if(!props.modelValue) {
      currentData.dataList = []
      return
    }
    getFileUrlApi(props.modelValue).then(res => {
      if(res.code === '200') {
        currentData.dataList = res.data
      } else {
        currentThis.$message.error('获取文件地址失败')
      }
    })
  }

  // 获取裁剪好的图片，并将图片上传
  function cutDown(e) {
    let formData = new FormData()
    formData.append('file', e.file)
    uploadFileApi(formData).then(res => {
      if(res.code === '200') {
        currentData.dataList.push(res.data)
        dataHandle()
      } else {
        currentThis.$message.error('上传文件失败')
      }
    })
  }

  // 删除图片
  function doDelete(index) {
    currentData.dataList.splice(index, 1)
    dataHandle()
  }
  
  // 处理数据，并返回数据给父组件
  function dataHandle() {
    let attachmentIds = []
    currentData.dataList.forEach(item => {
      attachmentIds.push(item.attachmentId)
    })
    emits('update:modelValue', attachmentIds.join(','))
  }

  // 获取图片预览数据
  function getImgList(e) {
    let list = []
    e.forEach(item => {
      list.push(item.fullUrl)
    })
    return list
  }

  function resetImgCutter() {
    currentData.dataList = []
  }
</script>

<style lang="less" scoped>
.imgCutter {
  .imgs{
    margin-top: 10px;
    width: 100%;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    >.img_item{
      position: relative;
      width: 180px;
      height: 120px;
      margin: 0 10px 8px 0;
      border-radius: 5px;
      overflow: hidden;
      :deep(.el-image) {
        width: 100%;
        height: 100%;
      }
      .upload_pic_success{
        position: absolute;
        bottom: -4px;
        right: -4px;
      }
      .upload_pic_delete{
        position: absolute;
        top: 0;
        left: 0;
        font-size: 15px;
        color: #D90615;
        cursor: pointer;
      }
    }
    .card{
      .upload_btn{
        width: 120px;
        height: 120px;
        border-radius: 5px;
        border: 1px dashed #DCDFE6;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>